<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
    <title>emplist</title>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <link rel="stylesheet" type="text/css" href="css/style.css"/>
</head>
<body>
<div id="wrap">
    <div id="top_content">
        <div id="header">
            <div id="rightheader">
                <p>
                    {{time}}
                    <br/>
                    <a href="javascript:;" @click="logout">安全退出</a>
                </p>
            </div>
            <div id="topheader">
                <h1 id="title">
                    <a href="/emplist.html">员工信息界面</a>
                </h1>
            </div>
            <div id="navigation">
            </div>
        </div>
        <div id="content">
            <p id="whereami">
            </p>
            <h1>
                Welcome {{user.realname}} !
            </h1>
            <table class="table">
                <tr class="table_header">
                    <td>
                        编号
                    </td>
                    <td>
                        姓名
                    </td>
                    <td>
                        头像
                    </td>
                    <td>
                        工资
                    </td>
                    <td>
                        年龄
                    </td>
                    <td>
                        操作
                    </td>
                </tr>
                <tr v-for="(emp,index) in emps" :key="emp.id" :class="index%2==0?'row1':'row2'">
                    <td>
                        {{emp.id}}
                    </td>
                    <td>
                        {{emp.name}}
                    </td>
                    <td>
                        <img :src="'/'+emp.path" style="height: 40px;">
                    </td>
                    <td>
                        {{emp.salary}}
                    </td>
                    <td>
                        {{emp.age}}
                    </td>
                    <td>
                        <a href="javascript:;" @click="delEmp(emp.id)">删除</a>&nbsp;&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp<a
                            :href="'/updateEmp.html?id='+emp.id">更新
                    </a>
                    </td>
                </tr>
            </table>
            <p>
                <input type="button" class="button" value="添加员工" onclick="location='addEmp.html'"/>
            </p>
        </div>
    </div>
    <div id="footer">
        <div id="footer_bg">
            545394882@qq.com
        </div>
    </div>
</div>
</body>
</html>
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<script>
    var app = new Vue({
        el: "#wrap",
        data: {  //数据
            user: {
                realname: "",
            },//用来存放用户登录信息
            emps: [],
            time: ""
        },
        methods: { //自定义函数
            //处理安全退出
            logout() {
                localStorage.removeItem("user");
                location.reload(true);//刷新页面
            },
            //删除员工信息方法
            delEmp(id) {
                if (window.confirm("确定要删除这条员工信息吗?")) {
                    var _this = this;
                    axios.get("http://localhost:8989/emp/delete?id=" + id).then(res => {
                        if (res.data.state) {
                            _this.findAll();//重新加载数据
                        } else {
                            alert(res.data.msg);
                        }
                    });
                }
            },
            //查询员工列表方法
            findAll() {
                var _this = this;
                axios.get("http://localhost:8989/emp/findAll").then(res => {
                    _this.emps = res.data;
                });
            },
            gettime() {
                var today = new Date();
                var year = today.getFullYear();
                var month = (today.getMonth() + 1) < 10 ? '0' + (today.getMonth() + 1) : (today.getMonth() + 1);
                var day = (today.getDate()) < 10 ? '0' + (today.getDate()) : (today.getDate());
                date1 = year + "-" + month + "-" + today.getDate();
                this.time = date1;

            }

        },
        created() {//生命周期函数
            var userString = localStorage.getItem("user");
            if (userString) {
                this.user = JSON.parse(userString);
            } else {
                alert("您尚未登录,点击确定跳转至登录页面!");
                location.href = "/login.html";
            }
            //查询所有信息
            this.findAll();
            this.gettime();
        }
    });
</script>